ES6学习总结（1）

半个月前就决定要将ES6的学习总结一遍，结果拖延症一犯，半个月就过去了，现在补起来，惭愧惭愧。

阮一峰的《ES6标准入门》这本书有300页左右，除了几个新的API和js语法的扩展,真正有价值的内容并不多。所谓“存在即合理”，每部分的内容都对相应的人群有价值，我将结合我在实习中接触过的ES6的部分和我的个人理解来对这本书的内容做个总结。如有不足或者谬误指出，还请拍砖。

总结主要从三个方面展开：1. 语法扩展；2. ES6新API; 3. 模块化方案。

1. 语法扩展

（1）let、const与块级作用域

• let、const声明的标识符仅在块级作用域内有效，块级作用域就是大括号（{}）包括的区域。const与let的差别在于let声明的是变量，const声明的是常量。

• let、const不存在变量提升

// let/const不存在变量提升
console.log(foo);   // undefined
var foo = "abc";

console.log(lish);  // 未定义报错,ReferenceError
let lish = "hello";

• let、const暂时性死区:已经声明了变量，在声明变量之前，该变量都是不可用的。在局部作用域中，即使已经存在全局的同名变量，还是无法在局部声明之前访问该变量，有点绕，直接上代码。

// 暂时性死区
var num = 1;
const add = () => {
    console.log(num);
    let num;
}
add();      // 报错，num is not defined

• let、const不允许重复声明,在ES5中，用var声明的变量我们可以用var重复声明，就好像重新赋值一样，但是用let、const重复声明会报错。

（2）解构赋值

解构赋值说白了就是“模式匹配”，从等号两边对应的位置取出对应的值

1. 数组的解构赋值

let [a, b, c] = [1, 2, 3];
// 从对应位置拿出对应值，相当于我们声明了三个变量
// let a = 1, b = 2, c = 3;

需要指出一点，只要某种数据具有Iterator接口，就可以采用数组形式的解构赋值(其中就包括字符串)，Iterator我们会在总结（2）提到。 举个例子

// Set是ES6新增的一种数据类型，拥有Iterator接口
let [x, y, z] = new Set([1, 2, 3]); // x = 1, y = 2, z = 3

解构允许指定默认值。默认值有undefined触发

let [x = 1, y = 2] = [44]; // x = 44, y = 2;
let [x = 1, y = 2] = [44, undefined]; // 与上面等价

1. 对象的解构赋值

只要我们知道这是模式匹配，就比较好理解了,先通过键找到对应的值，将值赋给等式左边相同键名对应的变量，{foo}就是{foo: foo}的简写形式，这属于对象的扩展，接下来会提到。

let { foo, bar } = { foo: 'hello', bar: 'world' };  // foo = 'hello', bar = 'world'
let {foo: val, bar} =  { foo: 'hello', bar: 'world' };  // val = 'hello', bar = 'world';

和数组解构类似，也可以为对象解构赋默认值let {x = 3} = {};,默认值由undefined触发。
需要注意的一点是，大括号不能出现在行首，会被解析为代码块，比如{x} = {x: 1};

1. 函数参数的解构赋值

参数可以为数组或对象
比如：我们为函数直接传一个数组，在函数内部我们直接可以使用解构后的值

const add = ([x, y]) => {
    return x + y;
}
console.log(add([1, 2]);    // 3
console.log(add.length);    // 1

上面代码中，比较好理解的是add.length，代表函数参数的个数，但是我们为参数指定默认值时, length为0，原因就是函数的length属性为没有指定默认值的参数的个数，而且不包括rest参数

const add = ([x, y] = [0, 0]) => {
    return x + y;
}
console.log(add());    // 0
console.log(add.length);    // 0

（3）模板字符串

字符串扩展中，最有用的就是模板字符串，用反引号（`）标识，模板字符串中可以使用变量，省去了用连接符来拼接字符串的麻烦。

let foo = 'hello';
console.log(`${foo} world!`);   // hello world

看了上面，相信大家都会在模板字符串中使用变量了，就是讲变量写在${}中就行了。
另外，模板字符串中还可以使用表达式（包括函数调用，运算等），同样，将表达式写在${}中就行了。

（4）扩展运算符（...）与 rest参数

1. 扩展运算符
   作用：将一个数组(姑且先说是数组)转换为用逗号分隔的参数序列。

console.log([1, 2, ...[2, 3, 4]]); // [1, 2, 2, 3, 4]
console.log(...'hello'); // h e l l o

// generator函数
let go = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log(...go());   // 1 2 3

问题来了：扩展运算符可以作用于哪些数据类型呢？

回答这个问题很关键，直接说答案吧：拥有Iterator接口的数据类型

1. rest参数

阮大神的书上原话：rest参数（...变量名），用于获取函数多余的参数，放进一个数组中。

const add = function (arg1, ...values) {
    return values;
};
console.log(add(1, 3, 5, 7));   // [3, 5, 7]

个人之见，这句话有点问题，rest参数好比是扩展运算符的逆运算，怎么能只用于获取函数多余的参数呢，事实证明，rest不仅仅用于获取函数参数。
我们看上的函数定义部分的参数和函数调用部分的参数，这不就是一个模式匹配吗？arg1对应第一个参数，...values对应剩余的参数。说道模式匹配，不得不说解构赋值，那么我们在解构赋值中应用rest参数呢，下面我们试试看

let values, num;
[num, ...values] = [1, 3, 5, 7];
console.log(values);    // [3, 5, 7]

实验证明rest参数也可以用于解构赋值中，要注意的是rest参数只能放在其他参数的后面，否则rest参数无法判断里面参数的个数

（5）数组的扩展

1. Array.from()
   作用： 将类似数组的对象和可遍历的对象（拥有Iterator接口）转为真正的数组

所谓类似数组的对象，关键在于有没有一个length属性表示对象中属性的个数

var obj = {0: 'hello', 'sayName': 'hi', 1: 'world', length: 2};
console.log(Array.from(obj));   //['hello', 'world'];

上面转换的只是键名为数字的属性

1. Array.of()
   作用：将一组数值转换为数组，主要目的为了弥补Array构造函数不能识别长度还是值。

2. 实例方法find()和findIndex()
   find()找到第一个符合条件的数组成员，参数为函数，返回true表示找到

findIndex(),与find()类似，返回的是数组的索引。

1. 遍历方法entries()、keys()、values()
   都返回遍历器对象，便利器对象可用for...of进行遍历

for(let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0
// 1

for(let value of ['a', 'b'].values()) {
    console.log(value);
}
// a
// b

for(let [index, value] of ['a', 'b'].entries()){
    console.log(index, value);
}
// 0 a
// 1 b

1. includes()
   作用：判断数组是否包含某个值，属于ES7，客户端使用要使用Babel进行转码，为了弥补indexOf()的不足，indexOf()内部使用“===”进行判断，对于NaN的判断会出错，而includes()解决了这个问题

console.log([NaN, NaN].indexOf(NaN));   // -1
console.log([NaN, NaN].includes(NaN));  // true

（6）函数的扩展

函数参数的解构赋值，默认值在第一部分已经提到，这里就不再总结，在函数扩展这一部分，我主要总结箭头函数的使用
ES6中可以使用箭头函数定义函数，方式如下：

const f = (arg1) => {
    return arg1 * 2;
}
const f = arg1 => arg1*2;     // 等同于上面的定义

当参数只有一个时，可以省略括号，当函数体只有return语句一条语句时，可以省略大括号和return关键字

使用箭头函数需要注意的几点

1. 箭头函数不可以当做构造函数

2. 不可以使用arguments对象

3. 不可以使用yield命令，不能用作generator函数

箭头函数没有自己的this,导致内部的this就是外层代码的this,所以不能用作构造函数，也不能使用call()、apply()、bind()改变this的指向

（7）对象的扩展

1. 属性的简洁表示法

变量名转属性名

let foo = 'hello';
let obj = {foo: foo};

// 简写形式
let foo = 'hello';
let obj = {foo};    // 变量名直接转为属性名

方法的简写

let obj = {
    sayName: function() {
        return 'hello';
    }
}

// 简写形式
let obj = {
    sayName() {
        return "hello";
    }
};

1. ES6允许字面量定义对象时使用表达式作为对象的属性名
   将表达式放在中括号中，但是属性名表达式与简洁表示法不能同时使用

let obj = {
    ['a' + 'bc']: 123
}

1. Object.is()
   用来比较两个值是否严格相等，与“===”行为基本一致，不同之处在于： +0不等于-0，NaN等于自身

2. Object.assign()
   将源对象的所有可枚举的自有属性复制（浅复制）到目标对象Object.assign(target, source1, source2 ...),返回target,可以处理数组，将其视为对象

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
// target => {a: 1, b: 2, c: 3};

一般情况下，我们不希望改变对象，只希望合并对象的属性，那么可以将target设为空对象{}， Object.assign({}, source1, source2);

需要注意的是Object.assign()执行的是浅复制， 如果源对象的属性为引用类型，那么target中对应的属性和源对象中的属性引用同一个值

let source1 = {b: {test: 'hello world'}};
let target = Object.assign({}, source1);

console.log(target.b);  // { test: 'hello world' }

source1.b.test = 111111;
console.log(target.b);  // {test: 111111}

1. 对象的属性的遍历

for...in 循环遍历对象自身和继承的可枚举属性（不含Symbol属性），Symbol是ES6中的一种新的数据类型，表示一个独一无二的值，在第二大部分，我将会讲到这个类型。
Object.keys(obj) 返回数组，包括对象自身的所有可枚举属性（不含Symbol属性）
Object.getOwnPropertyNames(obj) 返回数组，包含对象自身的所有属性（包括不可枚举属性，不包含Symbol属性）

说白了，就是ES5中遍历方法都无法获取到Symbol属性

Object.getOwnPropertySymbols(obj)返回数组，包含自身的所有Symbol属性
Reflect.ownKeys(obj)返回一个数组，包含对象自身的所有属性（包括不可枚举和Symbol）， Reflect是ES6中的新API，其目的之一就是将Object对象上一些属于语言层面的方法放到该对象身上，并修改某些方法，让其变得更合理。
Reflect.enumerate(obj)返回一个Iterator对象，遍历对象自身和继承的所有可枚举属性（不含Symbol），与for...in相同

1. __proto__和Object.setPrototype()

在红宝书中就已经提到过__proto__属性，表示的是引用类型实例的一个内部指针，指向该实例的构造函数的原型对象。一般不建议我们直接使用，因为这是一个非标准属性，但是所有浏览器都部署了这个属性，node中也可以使用

// 利用__proto__实现继承
function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log(this.name);
};

function Dog(name, leg) {
    Animal.call(this, name);
    this.leg = leg;
}
Dog.prototype.__proto__ = Animal.prototype;
Dog.prototype.constructor = Dog;

var dog = new Dog("Genkle", 4);
dog.sayName();  // Genkle

Object.setPrototype(object, prototype)用于设置一个对象的prototype对象，相当于object.__proto__ = prototype,是ES6中设置原型对象的方法。